<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>依依小姐の作品展</title>
		
		<link rel="shortcut icon" href="logo.png" />
		<link href="./css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
		<link rel="stylesheet" href="./css/style.css" type="text/css" media="all" />
		<link href="./css/animate.css" rel="stylesheet" type="text/css" media="all">
		<script src="./js/jquery.min.js"></script>
		<script src="./js/wow.min.js"></script>
		<script>
		 new WOW().init();
		</script>

	</head>
	
<body>
<!--header-->
<div class="header">
	<div class="header-top">
		<div class="container">
			<div class="logo">
				<a href="index.html"><img src="./images/logo.png" class="img-responsive" alt=""/></a>
			</div>
				<div class="header-right">
					<div class="menu">
					<span class="menu"> </span>
						<ul class="navigatoin">
						<li><a href="index.html" class="active">Home</a></li>
						  <li><a href="about.html">About</a></li>
						  <li><a href="contact.html">Contact</a></li>
						</ul>
						<div class="clearfix"> </div>
											<!--script-nav -->	
			<script>
					$("span.menu").click(function(){
						$("ul.navigatoin").slideToggle("slow" , function(){
						});
					});
					</script>
						<div class="clearfix"> </div>
					<!-- /script-nav -->

					</div>
				</div>
						<div class="clearfix"> </div>
		</div>
	</div>
</div>
	<div class="line">
		<a href="#"><img src="./images/line.png" class="img-responsive" alt=""/></a>
		<div class="clearfix"> </div>
	</div>
	<div class="clearfix"> </div>
<!--/header-->
<!--portfolio-->
<ul id="filters">
					<li><span class="filter active wow bounceIn" data-wow-delay="0.4s"" data-filter="app card icon logo icon web wen">所有作品</span></li>
					<li><span class="filter wow bounceIn" data-wow-delay="0.4s"" data-filter="web">PS图集</span></li>
					<li><span class="filter wow bounceIn" data-wow-delay="0.4s"" data-filter="wen">只字片语</span></li>
					<li><span class="filter wow bounceIn" data-wow-delay="0.4s"" data-filter="icon">推荐影片</span></li>
</ul>
<div class="portfolio">
  <div class="portfolio-info">
	<div class="container">
				<!--
                	作者：503817210@qq.com
                	时间：2016-08-02
                	描述：只字片语
                -->
				<div id="portfoliolist">
					<div class="portfolio wen mix_all" data-cat="wen" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper wow bounceIn capt" data-wow-delay="0.4s">		
							<a href="wenzi.html" class="b-link-stripe b-animate-go">
								 <img src="./images/wenzi/1.jpg" alt="" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 ">只字片语</h2>
								  <br />
								  <p class="b-animate b-from-left    b-delay03 ">心语</p>
								</div>
							</a>
		                </div>
					</div>
					<div class="portfolio wen mix_all" data-cat="wen" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper wow bounceIn capt" data-wow-delay="0.4s">		
							<a href="wenzi.html" class="b-link-stripe b-animate-go">
								 <img src="./images/wenzi/2.jpg" alt="" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 ">只字片语</h2>
								  <br />
								  <p class="b-animate b-from-left    b-delay03 ">《从前慢》</p>
								</div>
							</a>
		                </div>
					</div>
					<div class="portfolio wen mix_all" data-cat="wen" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper wow bounceIn capt" data-wow-delay="0.4s">		
							<a href="wenzi.html" class="b-link-stripe b-animate-go">
								 <img src="./images/wenzi/3.jpg" alt="" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 ">更多语录</h2>
								  <br />
								  <p class="b-animate b-from-left    b-delay03 ">点击进入</p>
								</div>
							</a>
		                </div>
					</div>
				<!--
                	作者：503817210@qq.com
                	时间：2016-08-02
                	描述：推荐影片
               -->
					<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper wow bounceIn capt" data-wow-delay="0.4s">		
							<a href="long.html" class="b-link-stripe b-animate-go">
								 <img src="./images/movie/long.jpg" alt="" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 ">《他是龙》</h2>
								  <br />
								  <p class="b-animate b-from-left    b-delay03 ">俄罗斯片</p>
								</div>
							</a>
		                </div>
					</div>
					
					<!--
                    	作者：503817210@qq.com
                    	时间：2016-08-02
                    	描述：PS图集
                    -->
					<div class="portfolio web mix_all" data-cat="web" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper wow bounceIn capt" data-wow-delay="0.4s">		
							<a target="_blank" href="images/ps/1-1.jpg" class="b-link-stripe b-animate-go">
								 <img src="./images/ps/1.jpg" alt="" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 ">水滴背景</h2>
								  <br />
								  <p class="b-animate b-from-left    b-delay03 ">依依制作</p>
								</div>
							</a>
		                </div>
					</div>
					<div class="portfolio web mix_all" data-cat="web" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper wow bounceIn capt" data-wow-delay="0.4s">		
							<a target="_blank" href="images/ps/2-1.jpg" class="b-link-stripe b-animate-go">
								 <img src="./images/ps/2.jpg" alt="" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 ">立体字效果</h2>
								  <br />
								  <p class="b-animate b-from-left    b-delay03 ">依依制作</p>
								</div>
							</a>
		                </div>
					</div>
					<div class="portfolio web mix_all" data-cat="web" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper wow bounceIn capt" data-wow-delay="0.4s">		
							<a target="_blank" href="images/ps/3-1.jpg" class="b-link-stripe b-animate-go">
								 <img src="./images/ps/3.jpg" alt="" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 ">图片剪辑</h2>
								  <br />
								  <p class="b-animate b-from-left    b-delay03 ">依依制作</p>
								</div>
							</a>
		                </div>
					</div>
					<div class="portfolio web mix_all" data-cat="web" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper wow bounceIn capt" data-wow-delay="0.4s">		
							<a target="_blank" href="images/ps/4-1.jpg" class="b-link-stripe b-animate-go">
								 <img src="./images/ps/4.jpg" alt="" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 ">水墨效果</h2>
								  <br />
								  <p class="b-animate b-from-left    b-delay03 ">依依制作</p>
								</div>
							</a>
		                </div>
					</div>
					<div class="portfolio web mix_all" data-cat="web" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper wow bounceIn capt" data-wow-delay="0.4s">		
							<a target="_blank" href="images/ps/5-1.jpg" class="b-link-stripe b-animate-go">
								 <img src="./images/ps/5.jpg" alt="" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 ">苹果西瓜</h2>
								  <br />
								  <p class="b-animate b-from-left    b-delay03 ">依依制作</p>
								</div>
							</a>
		                </div>
					</div>
					<div class="clearfix"></div>	
				</div>
				<!-- Script for gallery Here -->
				<script type="text/javascript" src="./js/jquery.mixitup.min.js"></script>
					<script type="text/javascript">
					$(function () {
						
						var filterList = {
						
							init: function () {
							
								// MixItUp plugin
								// http://mixitup.io
								$('#portfoliolist').mixitup({
									targetSelector: '.portfolio',
									filterSelector: '.filter',
									effects: ['fade'],
									easing: 'snap',
									// call the hover effect
									onMixEnd: filterList.hoverEffect()
								});				
							
							},
							
							hoverEffect: function () {
							
								// Simple parallax effect
								$('#portfoliolist .portfolio').hover(
									function () {
										$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
										$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');				
									},
									function () {
										$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
										$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');								
									}		
								);				
							
							}
				
						};
						
						// Run the show!
						filterList.init();	
					});	
					</script>
				<!-- Gallery Script Ends -->
			<div class="clearfix"></div>
	</div>
	</div>
</div>	
<div class="footer"></div>			
</body>
</html>